<template>
  <div id="app">
    <div class="home">
      <div class="list-banner">
        <div class="list-inner">
          <div class="text">
            <h1>直聘新闻和数据实时跟踪</h1>
            <div class="btns">
              <a href="">媒体合作</a>
            </div>
          </div>
        </div>
      </div>
      <div class="inner">
        <div class="list-card">
          <div v-for="(item, idx) in newsList" :key="idx" class="news-head">
            <div class="title">
              <div class="first">
                <h3>{{ item.title }}</h3>
              </div>
              <div class="secound">
                <a
                  href="http://1.15.180.181:3030/#/information"
                  @click="details(idx)"
                  class="toMore"
                >
                  more
                </a>
              </div>
            </div>
            <div class="text">
              <ul>
                <li><img :src="item.imgWarp" alt="" /></li>
                <li>
                  <a href="">{{ item.textTitle }}</a>
                </li>
                <li>
                  <a href="">{{ item.textView }}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <news ref="morenews" :newskind="kindall" :index="count"></news>

        <div class="more_all">
          <div class="more">
            <a type="button" @click="all" class="button">加载更多</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNews } from "@/api";
import news from "./news.vue";

export default {
  name: "homePage",
  components: {
    news,
  },
  data() {
    return {
      msg: "这是资讯",
      count: 5,
      newsList: [], //3个数据分类
      kind: [],
      kindall: [],
      allclick: false,
    };
  },
  created() {
    getNews().then((res) => {
      console.log(res.data.data);
      this.newsList = res.data.data;
      this.kindall = this.newsList[0].kind;
    });
  },
  mounted() {
    document.onscroll = this.scroll;
    this.d = document.querySelector(".more");
  },
  methods: {
    details(i) {
      this.kindall = this.newsList[i].kind;
      // console.log(this.kindall)
    },
    all() {
      this.d.style.display = "none";
      // console.log(1);
      this.allclick = true;
      this.load();
    },
    scroll() {
      // 2. 获取滚走了的距离
      const st = document.documentElement.scrollTop;
      // 2. 获取页面的可视高度
      const ch = document.documentElement.clientHeight;
      // 2. 获取页面的总高度（含可滚动的尺寸）
      const sh = document.documentElement.scrollHeight;
      // console.log(sh, st, ch);
      // 3. 当页面的总高度小于了滚走的距离加上可视高度加过渡距离
      if (sh < st + ch + 1500) {
        this.d.style.display = "block";
        document.onscroll = null;
      }
    },
    load() {
      // 7. 异步加载数据
      // 8. 加载成功，修改状态
      if (this.allclick) {
        this.count += 5;
        this.allclick = false;
        // console.log(this.count);
        // console.log(this.kindall.length);
        scroll();
      }
      // 9. 判断数据是否已经全部加载
      if (this.count >= this.kindall.length) {
        // 10. 修改加载结束状态
        document.onscroll = null;
      } else {
        this.d.style.display = "block";
      }
    },
  },
  watch: {
    kindall() {
      this.count = 5;
      this.d.style.display = "block";
    },
  },
};
</script>
<style lang="less">
html,
body,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
ol {
  margin: 0;
  padding: 0;
}
.home {
  width: 100%;
  // height:3500px;
  background: #f5f7f9;
  position: relative;
  display: flex;
  flex-direction: column;
  .list-banner {
    width: 100%;
    height: 400px;
    background: url(https://static.zhipin.com/zhipin-geek/v537/web/news/images/list-banner.jpg);
    .list-inner {
      width: 1184px;
      height: 244px;
      margin: 0 auto;
      .text {
        width: 1184px;
        height: 134px;
        padding-top: 108px;
        h1 {
          height: 42px;
          text-align: center;
          color: white;
          font-size: 36px;
          font-weight: 400;
        }
        .btns {
          width: 188px;
          height: 44px;
          color: #fff;
          margin: 50px auto 0;
          text-align: center;
          line-height: 44px;
          font-size: 20px;
          font-weight: 300;
          background: #59cac2;
          border-radius: 22px;
        }
      }
    }
  }

  .inner {
    width: 1184px;
    // height: 2814px;
    margin: -66px auto 0;
    .list-card {
      background: #ffffff;
      width: 1184px;
      height: 418px;
      display: flex;
      margin-bottom: 30px;
      .news-head {
        margin: 40px 10px;
        width: 388px;
        height: 338px;
        .title {
          width: 284px;

          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          .first {
            border-left: 4px solid #59cac2;
            height: 20px;
            line-height: 20px;
            padding-left: 20px;
          }
          .secound {
            border: 1px solid #a7a5a3;
            width: 49px;
            height: 20px;
            text-align: center;
            border-radius: 25px;
            .toMore {
              cursor: pointer;
            }
          }
        }
        .text {
          width: 284px;
          height: 312px;
          margin: 40px auto 0;
          li:nth-child(2) {
            margin: 40px 0 20px;
            font-size: 20px;
            a {
              color: rgb(0, 0, 0);
            }
          }
          li:nth-child(3) {
            font-size: 14px;
            a {
              color: #999;
            }
          }
        }
      }
    }
  }

  .more_all {
    width: 1184px;
    background: #fff;
    padding: 20px 0;
    .more {
      background: #fff;
      margin: 0 auto;
      width: 984px;
      height: 50px;
      display: none;
      a {
        display: block;
        border: solid 1px #59cac2;
        width: 984px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: #fff;
      }
      .button:hover{
        color: #59cac2;
        background: #fafafa;
        cursor:pointer
      }
    }
  }
}
</style>